<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>jquery-dom-二级联动</title>
</head>
<body>
<!--
    1.  数据
    2.  视图
-->

<select id="sltCity"></select>
<select id="sltArea"></select>

</body>
<script src="../../lib/jquery.js"></script>

<script type="module">
    import {cities} from "../../mock/cities.js";
    function initSelect(items,selector) {
        $(selector).empty();
        $.each(items, function (index, item) {
            let opt = $('<option></option>').val(item.id).text(item.name)
            $(selector).append(opt);
        })
    }

    /**
     *  1. 初始化城市列表
     *  2. 根据选择项目的value 来获取右侧的区域列表
     *         1. 数据   cities.filter
     *         2. 视图   onChage  initSelect
     * */

    initSelect(cities,"#sltCity");
    $('#sltCity').bind('change',cityChange)

     function cityChange(){

          let selected= $('#sltCity').val();
          let areas = cities.find(function (item) {
              return item.id == selected;
          }).areas;

         initSelect(areas,"#sltArea")

     }



</script>
</html>